<template>
 <van-tabbar v-model="active" active-color="#ee0a24">
    <van-tabbar-item
      v-for="nav in navs" :key="nav.name"
      :icon="nav.icon" :name="nav.name" :to="{ name: nav.name }"
    >
      {{ nav.title }}
    </van-tabbar-item>
</van-tabbar>
</template>
<script setup lang="ts">
import {ref} from 'vue'

type FooterActiveNameType = 'home' | 'category' | 'cart' | 'mine'
const active = ref<FooterActiveNameType>('home')

interface INav{
    icon:string, name: FooterActiveNameType,title:string,
}
const navs: INav[] = [
  { icon: 'home-o', name: 'home', title: '首页' },
  { icon: 'search', name: 'category', title: '分类' },
  { icon: 'friends-o', name: 'cart', title: '购物车' },
  { icon: 'setting-o', name: 'mine', title: '我的' },
]


</script>